<template>
  <div>
    <el-card class="box-card">
      <div class="head">设置日程</div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="播放测率" prop="fre">
          <el-radio-group v-model="form.frequency">
            <el-radio label="替换">替换</el-radio>
            <el-radio label="插播"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="播放模式" prop="mode">
          <el-radio-group v-model="form.pattern">
            <el-radio label="时段播放"></el-radio>
            <el-radio label="持续播放"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="多屏同步" prop="more">
          <el-radio-group v-model="form.syn">
            <el-radio label="打开"></el-radio>
            <el-radio label="关闭"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="播放日期" prop="time">
          <el-col :span="3">
            <el-date-picker
              v-model="form.date1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 150%"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <div class="add">
          <div class="time">
            <div class="added" v-show="showAddTime">
              <div class="added-text">
                <p>循环时间段：</p>
                <p>{{ addtime.startTime }}-{{ addtime.endTime }}</p>
                <p>循环周期：</p>
                <p>{{ addtime.cycle }}</p>
              </div>
              <div class="added-icon">
                <img src="../../assets/edit.png" @click="editTime" />
                <img src="../../assets/delete.png" @click="deleteTime" />
              </div>
            </div>
            <div class="addtime" @click="addMoreTime">
              <div class="addtime-more" style="color: white">
                <img src="../../assets/add.png" />添加时间段
              </div>
              <el-dialog
                title="循环时间段"
                :visible.sync="dialogFormVisible"
                v-model="dialogFormVisible"
                width="30%"
              >
                <el-form :model="form1">
                  <el-form-item label="循环时间" :label-width="formLabelWidth">
                    <el-col :span="8">
                      <el-time-picker
                        is-range
                        v-model="form1.valueTime"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        value-format="HH:mm:ss"
                        style="width: 200%"
                      >
                      </el-time-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="循环周期" :label-width="formLabelWidth">
                    <el-select
                      v-model="form1.time"
                      placeholder="请选择循环周期"
                      style="width: 50%"
                    >
                      <el-option label="每天" value="每天"></el-option>
                      <el-option label="每周" value="每周"></el-option>
                      <el-option label="每月" value="每月"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div
                  slot="footer"
                  class="dialog-footer"
                  style="position: absolute; right: 5px; bottom: 5px"
                >
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="addTime">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </div>
          <div class="program">
            <div class="add-program" v-show="showAddProgram">
              <el-image :src="url" :preview-src-list="srcList"> </el-image>
              <div class="added-icon">
                <img src="../../assets/delete.png" @click="deletePro" />
              </div>
            </div>
            <div class="addprogram" @click="addMoreProgram">
              <div class="addprogram-more" style="color: white">
                <img src="../../assets/add.png" />
                <div>添加节目</div>

                <el-dialog
                  title="添加节目"
                  :visible.sync="dialogForm1Visible"
                  v-model="dialogForm1Visible"
                  width="50%"
                >
                  <el-form :model="form2" style="display: flex">
                    <el-form-item label="节目名称" style="width: 40%">
                      <el-input v-model="form2.name"></el-input>
                    </el-form-item>
                    <el-form-item label="分辨率" :label-width="formLabelWidth">
                      <el-select
                        v-model="form2.ratio"
                        placeholder="请选择"
                        style="width: 80%"
                      >
                        <el-option
                          label="1080x1920"
                          value="1080x1920"
                        ></el-option>
                        <el-option
                          label="1920x1080"
                          value="1920x1080"
                        ></el-option>
                        <el-option
                          label="2160x3840"
                          value="2160x3840"
                        ></el-option>
                        <el-option
                          label="3840x2160"
                          value="3840x2160"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>

                  <div class="choose" v-if="show" style="display: flex">
                    <p>
                      已选择<span>{{ count }}</span
                      >项
                    </p>
                    <el-button
                      type="text"
                      size="middle"
                      @click="toggleSelection()"
                      >取消选择</el-button
                    >
                  </div>

                  <el-table
                    ref="multipleTable"
                    @select="handleSelect"
                    @select-all="selectAll"
                    @selection-change="changeFun"
                    :data="tableData"
                    height="250"
                    border
                    style="width: 100%; margin-bottom: 20px"
                  >
                    <el-table-column
                      type="selection"
                      width="40"
                    ></el-table-column>
                    <el-table-column
                      prop="pic"
                      label="缩略图"
                      width="180"
                      key="slot"
                    >
                      <template #default="scope">
                        <el-avatar
                          shape="square"
                          :size="60"
                          fit="fill"
                          :src="scope.row.pic[0]"
                        ></el-avatar>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="节目名称"
                    ></el-table-column>
                    <el-table-column
                      prop="ratio"
                      label="分辨率"
                    ></el-table-column>
                    <el-table-column
                      prop="long"
                      label="节目时长"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="big"
                      label="节目大小"
                      width="100"
                    ></el-table-column>
                  </el-table>

                  <div
                    slot="footer"
                    class="dialog-footer"
                    style="position: absolute; right: 5px; bottom: 5px"
                  >
                    <el-button @click="dialogForm1Visible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="addProgram"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
        <el-form-item class="btn" style="width: 40%; margin: 0 auto">
          <el-button
            style="margin-right: 30px"
            @click="$router.push('/planlist')"
            >取消</el-button
          >
          <el-button style="margin-right: 30px" @click="save">保存</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createPlan } from "../../axios/plan";
import { request } from '../../axios/request';
import { getShow } from "../../axios/show";
  export default {
    data() {
      return {
        form: {
          name: '',
          frequency:'',
          pattern:'',
          syn:'',
          date1: '',
          date2: ''
        },
        dialogFormVisible: false,
        form1: {
          valueTime:'',
          time:'',
        },
        formLabelWidth: '120px',
        dialogForm1Visible: false,
        form2:{
          name:'',
          ratio:'',
        },
        tableData: [],
        count: 0,
        show:0,
        btnBoolean:true,
        showAddTime:false,
        showAddProgram:false,
        picId:0,
        url: '',
        srcList: [],
        addtime:{
          startTime:'10:10:10',
          endTime:'11:30:00',
          cycle:'每天',
        },
        chosePlan:[],
        showIds:[],
        html:[]
      }
    },
    methods: {
      toggleSelection() {
        this.$refs.multipleTable.clearSelection();
        this.count=0;
        this.show=0
        this.btnBoolean=true
        console.log(this.count)
    },
    handleSelect(val) {
      console.log(val)
      if(val.length==0){
        console.log(1)
        this.count--
        if(this.count==0){
          this.show=0
          this.btnBoolean=true
        }
      }else{
        console.log(2)
        this.count++
        this.show=1
        this.btnBoolean=false
      }
      // console.log(this.count)
    },
    selectAll:function () {
      if(this.count==0){
        this.show=1
        this.btnBoolean=false
        this.count=this.tableData.length
      }else{
        this.show=0
        this.btnBoolean=true
        this.count=0
      }
    },
    addTime(){
      this.dialogFormVisible = false
      console.log(1)
      console.log()
      console.log(this.form1.valueTime[1])
      console.log(this.form1.time)
      this.addtime.startTime=this.form1.valueTime[0]
      this.addtime.endTime=this.form1.valueTime[1]
      this.addtime.cycle=this.form1.time
      this.showAddTime=true
    },
    addProgram(){
      console.log(11111)
      // console.log(this.chosePlan.pic)
      this.url=this.chosePlan[0].pic[0]
      this.srcList=this.chosePlan[0].pic
      this.showIds.push(this.chosePlan[0].id)
      this.html.push(...this.chosePlan[0].pic)
      console.log('html')
      console.log(this.html)
      this.dialogForm1Visible = false
      this.showAddProgram=true
    },
    next(){
      this.$router.push({
        path:'/planequipment',
        query:{
          name:this.form.name,
          date1:this.form.date1[0],
          date2:this.form.date1[1],
          pattern:this.form.pattern
        }})
    },
    deletePro(){
      this.showAddProgram=false
    },
    deleteTime(){
      this.showAddTime=false
    },
    editTime(){
      this.dialogFormVisible = true
    },
    save(){
      // console.log(this.form.name)
      // console.log(this.form.pattern)
      // console.log(this.form.date1[0])
      // console.log(this.form.date1[1])
      const cycle=this.addtime.cycle
      const startTime=this.addtime.startTime
      const endTime=this.addtime.endTime
      // console.log()
      const showIds=JSON.parse(JSON.stringify(this.showIds));
      
      console.log(this.html)
      // const picture=JSON.stringify(this.html)
      const htmls = this.html.map( val => {
        return  {
          html: `<img src='${val}' style='height: 100vh; width: 100%; object-fit: scale-down'/>`,duration: 3,
        }
      })
      // console.log();
      const html = JSON.stringify(htmls)
      const playPeriods=[{cycle,startTime,endTime,showIds,html}]
      createPlan(this.form.name,this.form.pattern,this.form.date1[0],this.form.date1[1],playPeriods).then(request=>{
        console.log(request)
      })
      // createPlan("111","按时段播放", "2022-1-1","2022-2-2",showIds).then(request=>{
      //   console.log(request)
      // })
      this.$router.push('/planlist')
    },
    addMoreTime(){
      this.dialogFormVisible = true
    },
    addMoreProgram(){
      this.dialogForm1Visible = true
      getShow("0","100").then(request=>{
        console.log(request.data.shows)
        let data=request.data.shows
        data.forEach(element => {
          const Images = JSON.parse(element.Images)
          // console.log(Images);
          this.tableData.push(
            {
              id:element.ID,
              pic:Images,
              name: element.Name,
              ratio: element.Resolution,
              long:element.Duration,
              big:''
            }
          )
        });
      })
    },
    changeFun(val){
      console.log(val)
      this.chosePlan=val
      console.log(1111)
      console.log(this.chosePlan)
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  background-color: rgb(41, 45, 62);
  border: 0px;
  .head {
    color: white;
    font-size: 17px;
  }
  .el-form {
    margin-top: 20px;
  }
  .add {
    display: flex;
    width: 100%;
    height: 300px;
    // border: 1px solid yellow;
    margin-bottom: 30px;
    .time {
      width: 25%;
      height: 300px;
      border: 1px solid white;
      .added {
        width: 80%;
        height: 100px;
        border: 2px solid white;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 20px;
        color: rgb(64, 158, 255);
        display: flex;
        .added-text {
          width: 80%;
          margin-left: 5px;
          line-height: 22px;
          margin-top: 5px;
        }
        .added-icon {
          width: 15%;
          height: 50px;
          margin-top: 10px;
          img {
            width: 50%;
            height: 40%;
          }
        }
      }
      .addtime {
        width: 80%;
        height: 100px;
        border: 2px dashed white;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        .addtime-more {
          margin: 0 auto;
          margin-top: 30px;
          img {
            width: 20px;
            height: 20px;
            margin-top: 6px;
            margin-right: 10px;
            background-size: cover;
          }
        }
      }
    }
    .program {
      width: 60%;
      height: 100%;
      border: 1px solid white;
      margin-left: 50px;
      display: flex;
      .add-program {
        width: 20%;
        height: 200px;
        margin-left: 10px;
        margin-top: 20px;
        display: flex;
        .added-icon {
          width: 15%;
          height: 50px;
          // margin-top: 10px;
          // position: absolute;
          // z-index: 2;
          img {
            // width:15%;
            height: 40%;
          }
        }
      }
      .addprogram {
        width: 20%;
        height: 200px;
        border: 2px dashed white;
        border-radius: 5px;
        margin-left: 10px;
        margin-top: 20px;
        display: flex;
        .addprogram-more {
          margin: 0 auto;
          margin-top: 90px;
          img {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            background-size: cover;
          }
          .choose {
            display: flex;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            .el-button {
              position: absolute;
              right: 50px;
            }
          }
        }
      }
    }
  }
}
</style>